<style>
    .number {
        cursor: pointer;
        padding: 0px 10px;
        border-right: 1px solid gray;
        font-size: 12px;
    }

    .numberColor {
        color: #3276b1;
    }
</style>
<div id="content" class="cotAdj">
    <div style="margin-right:20px; ">
        <div class="row cpInfo">
            <div smart-include="app/project/views/sub-header.tpl.html"></div>
            <div class="col-xs-12">
                <div class="line"></div>
            </div>
        </div>
        <!-- widget grid -->
        <section id="widget-grid" widget-grid>
            <!-- start row -->

            <div class="row">
                <!-- well -->
                <article class="col-xs-12 col-sm-12 col-md-12 col-lg-12 jqtable">

                    <table id="jqgrid"></table>
                    <div id="pjqgrid"></div>

                </article>
                <!-- end well-->
            </div>
            <!-- end row -->
        </section>
    </div>
</div>

<script type="text/javascript">

    var pagefunction = function () {
        run_jqgrid_function();
        function run_jqgrid_function() {
            jQuery("#jqgrid").jqGrid({
                url: baseurls + "user/showdept",
                datatype: "json",
                height: 'auto',
                colNames: ['部门名称'],
                colModel: [
					{ name: 'pdname', index: 'pdname', align: "left", editrules: {  required: true }, editable: true }
					//{ name : 'name', index : 'name',editrules:{required:true}, editable : true }

                ],
                rowNum: 10,
                rowList: [10, 20, 30],
                pager: '#pjqgrid',
                sortname: 'pdname',
                toolbarfilter: true,
                viewrecords: true,
                sortorder: "asc",
                loadBeforeSend: function (xhr) {
                    xhr.setRequestHeader("token", custom.token);
                    return xhr;
                },
                editurl: baseurls + "user/editdept",
                caption: "部门信息表",
                multiselect: true,
                autowidth: true,

            });
            jQuery("#jqgrid").jqGrid('navGrid', "#pjqgrid", {
                edit: false,
                add: false,
                del: true
            });
            jQuery("#jqgrid").jqGrid('inlineNav', "#pjqgrid");
            /* Add tooltips */
            $('.navtable .ui-pg-button').tooltip({
                container: 'body'
            });

            jQuery("#m1").click(function () {
                var s;
                s = jQuery("#jqgrid").jqGrid('getGridParam', 'selarrrow');
                alert(s);
            });
            jQuery("#m1s").click(function () {
                jQuery("#jqgrid").jqGrid('setSelection', "13");
            });

            // remove classes
            $(".ui-jqgrid").removeClass("ui-widget ui-widget-content");
            $(".ui-jqgrid-view").children().removeClass("ui-widget-header ui-state-default");
            $(".ui-jqgrid-labels, .ui-search-toolbar").children().removeClass("ui-state-default ui-th-column ui-th-ltr");
            $(".ui-jqgrid-pager").removeClass("ui-state-default");
            $(".ui-jqgrid").removeClass("ui-widget-content");

            // add classes
            $(".ui-jqgrid-htable").addClass("table table-bordered table-hover");
            $(".ui-jqgrid-btable").addClass("table table-bordered table-striped");


            $(".ui-pg-div").removeClass().addClass("btn btn-sm btn-primary");
            $(".ui-icon.ui-icon-plus").removeClass().addClass("fa fa-plus");
            $(".ui-icon.ui-icon-pencil").removeClass().addClass("fa fa-pencil");
            $(".ui-icon.ui-icon-trash").removeClass().addClass("fa fa-trash-o");
            $(".ui-icon.ui-icon-search").removeClass().addClass("fa fa-search");
            $(".ui-icon.ui-icon-refresh").removeClass().addClass("fa fa-refresh");
            $(".ui-icon.ui-icon-disk").removeClass().addClass("fa fa-save").parent(".btn-primary").removeClass("btn-primary").addClass("btn-success");
            $(".ui-icon.ui-icon-cancel").removeClass().addClass("fa fa-times").parent(".btn-primary").removeClass("btn-primary").addClass("btn-danger");

            $(".ui-icon.ui-icon-seek-prev").wrap("<div class='btn btn-sm btn-default'></div>");
            $(".ui-icon.ui-icon-seek-prev").removeClass().addClass("fa fa-backward");

            $(".ui-icon.ui-icon-seek-first").wrap("<div class='btn btn-sm btn-default'></div>");
            $(".ui-icon.ui-icon-seek-first").removeClass().addClass("fa fa-fast-backward");

            $(".ui-icon.ui-icon-seek-next").wrap("<div class='btn btn-sm btn-default'></div>");
            $(".ui-icon.ui-icon-seek-next").removeClass().addClass("fa fa-forward");

            $(".ui-icon.ui-icon-seek-end").wrap("<div class='btn btn-sm btn-default'></div>");
            $(".ui-icon.ui-icon-seek-end").removeClass().addClass("fa fa-fast-forward");


            $(window).on('resize.jqGrid', function () {
                jQuery("#jqgrid").jqGrid('setGridWidth', $("#content").width());
            })

        }

    };

    pagefunction();

</script>